import React from 'react'
import axios from 'axios'
import { Provider, connect } from 'react-redux';
import store from '@/redux/reducer.jsx'
import {mapStateToProps,mapDispatchToProps} from '@/redux/action.js'
// import goodscss from '@/css/goods.scss'
import 'bootstrap/dist/css/bootstrap.min.css'


class Good extends React.Component{
		constructor(){
			super()
			this.state={
				list:[
					{"id":1,name:"溜肉段","price":12},
					{"id":2,name:"干煸豆角","price":16},
					{"id":3,name:"炝干豆腐丝","price":14},
					{"id":4,name:"锅包肉","price":36}
				]
			}
		}
		// 渲染必有
		// 	componentDidMount(){
		// 		axios.get('data.json').then(result=>{
		// 			 console.log(result)
		// 			this.setState({
		// 				list:result.data
		// 			})
		// 		})
		// 	}

		
		// 加入购物车
		addCart(info){
			// 拿到id首先要判断是否在store中  如果在  知识数量加一
			// 如果不在 需要将数据push到store中
			// 修改存入购物车的数组
			var cartinfo = {id:info.id,name:info.name,price:info.price,num:1};
			var cart = this.props.cart;
			var obj  = cart.findIndex((value,index,cart)=>{
				return value.id == info.id;
			})
			if(obj==-1){
				// 需要把catinfo  存入 store
				this.props.addcart(cartinfo);
			}
			else{
				// 需要改数量
				// this.props.addNum(obj)
			}
			// console.log(this.props.cart)
		}
		render(){
			return(
				<div>
					<table className="table table-border">
						<thead>
							<tr>
								<th>ID</th>
								<th>名称</th>
								<th>价格</th>
								<th>数量</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							{this.state.list.map((item,index)=>{return(
								<tr key={index}>
									<td>{item.id}</td>
									<td>{item.name}</td>
									<td>{item.price}</td>
									<td>{item.count}</td>
									<td>
										<button onClick={()=>this.addCart(item)}>加入购物车</button>
									</td>
								</tr>
							
							)})}
						</tbody>
					</table>
				</div>
			)
		}
}


Good = connect(mapStateToProps,mapDispatchToProps)(Good)
export default Good;